// 1、相关的模块加载
//   a、Vue 构造函数的加载
import Vue from 'vue'
//   b、路由模块，路由模块返回的是一个 路由构造函数
import Router from 'vue-router';
//   为项目安装 路由功能
//         + 全局混入具有路由配置解析的 beforeCreate 生命周期
//         + 增加全局组件 <router-view></router-view>  <RouterView></RouterView>
//              基于 <compoent></compoent>动态组件完成二次封装的组件
//              保留了动态组件技术的相关功能，增加了URL地址解析的 地址对应组件的寻找和加载操作
//         + 增加全局组件 <router-link></router-link>  <RouterLink></RouterLink>
//              自定义的组件地址切换标签，通过为该组件提供 to 属性描述的方式，
//              表示被点击时需要切换URL 组件路由地址
//              该组件带有默认分发功能
//              !! 该组件默认以 <a> 标签作为渲染目标标签
//              !! 通过 定义属性 tag="标签名" 改变该组件的渲染标签类型
Vue.use(Router)

// 2、基于路由构造函数创建路由实例对象
// const route = new Router(options);
/*
    options 通过取值 对象方式，描述当前项目中路由功能
        {
            // 激活路由样式配置
            linkActiveClass:"class名称", 重命名 .router-link-active
            linkExactActiveClass:"class名称", 重命名 .router-link-exact-active

            // 路由模式切换
            mode:"history|hash",
            base:在模式使用history时必须配置，用于统一路由地址和 vue.config.js 中的pulicPath
                 不能使用 ./ 

            // 路由表
            // 描述组件和地址的关系 ==> 当URL地址变换后，vue知道该地址应该渲染那个组件 
            // 路由中定义的组件 以及被路由进行统一管理，不需要在使用页面中定义为局部组件
            routes:[
                // 一个组件的 路由地址的相关详细描述
                { 
                    path:"定义组件地址"，
                        + 基本地址定义：
                            通过配置path属性描述组件和地址关系，
                            一级路由定义时必须使用/开头（在new Router 的 routes 中配置的路由组件），
                            子级路由可选择绝对路径或相对路径
                        + 默认地址定义
                            vue路由默认展示是地址为 / 的组件，因此以path:"/"描述默认组件
                            默认地址一般使用路由定向方式跳转到其它组件上：{path:"/"，redirect："目标地址"}
                        + 通配地址定义
                            对没有在路由表中定义的路径，vue会进行统一的地址处理
                            通过配置path通配符 *，描述路由表中不存在的地址默认访问的组件
                            {path:"*"，redirect："目标地址"} 
                            {path:"*"，component：组件}

                    name:"路由别名"
                    component："定义组件",
                    redirect："目标地址",
                        描述目标路由地址的配置,当前用户访问某个地址时，可以通过该属性自动进行地址切换
                    meta:"定义自定义数据",
                    children:"定义子路由"
                        为当前组件构建子级路由配置
                        该属性的取值和 routes 的配置一样
                        在子路由配置时，path取值的前缀可以包含/ 也可以没有 /
                            + 包含 / 表示访问该子路由时，隐藏父路由地址
                            + 不包含 / 表示访问子路由时，子路由地址在父路由地址之后进行拼接
                }
            ]
        }
*/
import DefaultPage from "@/view/DefaultPage";
import CarefulPage from "@/view/CarefulPage";
import ComponentSyle from '@/view/ComponentStyle/ComponentSyle';
import AjaxPage from '@/view/AjaxPage';
import AjaxUtil from '@/view/AjaxUtil';
import AjaxCorse from '@/view/AjaxCorse';
import PluginPage from '@/view/PluginPage';
import RouterMenus from '../view/RouterPages/RouterMenus'
import RouterInstall from '@/view/RouterPages/pages/RouterInstall';
import RouterOptions from '@/view/RouterPages/pages/RouterOptions';
import NotFound from '@/view/NotFound.vue';

const router = new Router({
    // base:"/dist/",
    // mode:"history", // 删除路径中的 # 关键字
    mode:"hash",
    linkActiveClass:"active",
    linkExactActiveClass:"ex-active",
    // 第一层路由配置-一级路由
    routes:[
        {
            path:"/",
            // component:DefaultPage
            redirect:"/default"
        },
        { 
            // 定义当前组件的对应URL地址
            path:"/default",
            // 定义当前URL地址对应的组件文件内容的(.vue导入后返回的组件对象数据)
            component:DefaultPage
        },
        {
            path:"/careful",
            component:CarefulPage
        },
        {
            path:"/style",
            component:ComponentSyle
        },
        {
            path:"/ajax",
            component:AjaxPage
        },
        {
            path:"/util",
            component:AjaxUtil
        },
        {
            path:"/corse",
            component:AjaxCorse
        },
        {
            path:"/plugin",
            component:PluginPage
        },
        {
            path:"/router",
            component:RouterMenus,
            children:[
                {
                    path:"",
                    redirect:"install"
                },
                {
                    path:"install",
                    component:RouterInstall
                },
                {
                    path:"options",
                    component:RouterOptions
                }
            ]
        },
        {
            path:"*",
            component:NotFound
        }
    ]
});

// 3、将路由实例对象进行导出
export default router;


